<template>
  <div class="container">
    <div class="map">
      <baidu-map
        class="bmView"
        :scroll-wheel-zoom="true"
        :center="location"
        :zoom="zoom"
        ak="2h9wN9GgNpKzrBPmvXFdBtApasaB5cmx"
      >
        <bm-view style="width: 100%; height: 100%; flex: 1"></bm-view>
        <bm-marker :position="location" :dragging="false" animation="BMAP_ANIMATION_BOUNCE" />
        <!-- <bm-local-search :keyword="addressKeyword" :auto-viewport="true" style="display: none"></bm-local-search> -->
        <bm-driving
          :start="curLocation"
          :end="location"
          :panel="false"
          :auto-viewport="false"></bm-driving>
          </baidu-map>
    </div>
    <div style="padding:15px 0 15px 40px;box-shadow:0 2px 4px 6px rgba(0, 0, 0, .06);border-radius:10px;margin:16px;position:relative;">
        <div @click="openLocation" style="height:22px;line-height:22px;">
          <span style="font-size:17px;">{{serveName}}</span>
        <span style="position:absolute;top:15px;height:21px;color:white;background:#F73F49;border-radius:10px;padding:0 14px;margin-left:15px;font-size:14px;display:inline-block;line-height:inherit;">到这里</span></div>
        <div style="margin-top:8px;"><span style="font-size:12px;color:#95969F">{{detailAddress}}</span></div>
    </div>
  </div>
</template>

<script>
import { Col, Row } from 'vant';
import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import BmView from 'vue-baidu-map/components/map/MapView.vue';
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmDriving from 'vue-baidu-map/components/search/Driving'

import wx from 'weixin-js-sdk';

import {
  getWxConfig,
  getDetailById
} from '@/api/api';

export default {
  name: 'service_detail',
  data() {
    return {
      location: {
        lng: 118.353,
        lat: 33.946
      },
      curLocation:{
        lng: 118.353,
        lat: 33.946
      },
      zoom: 12.8,
      serveName:'',
      detailAddress:''
    };
  },
  created(){
    this.curLocation.lat = this.$route.query.lat;
    this.curLocation.lng = this.$route.query.lng;
    //console.log(JSON.stringify(this.curLocation));
    this.getDetail(this.$route.query.id);
  },
  mounted(){
    this.getConfig();
  },
   watch:{
      $route(to,from){
        this.curLocation.lat = this.$route.query.lat;
        this.curLocation.lng = this.$route.query.lng;
        //console.log(JSON.stringify(this.curLocation));
        this.getDetail(this.$route.query.id);
      }
  },
  
  methods: {
    getDetail: function(id){
      getDetailById({serveId:id}).then(res=>{
        //console.log(JSON.stringify(res.data.data));
        let detail = res.data.data;
        this.serveName = detail.serveName;
        this.detailAddress = detail.province + detail.city + detail.county + detail.addressDetail;
        this.location.lat = detail.lat;
        this.location.lng = detail.lng;
      });
    },
    openLocation(){
      
      var _this = this;
      //console.log(_this.location.lat);
      wx.openLocation({
        latitude: _this.location.lat, // 纬度，浮点数，范围为90 ~ -90
        longitude: _this.location.lng, // 经度，浮点数，范围为180 ~ -180。
        name: _this.serveName, // 位置名
        address: _this.detailAddress, // 地址详情说明
        scale: 12, // 地图缩放级别,整形值,范围从1~28。默认为最大
        infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
      });
    },
    getUrl() {
      if (window.entryUrl === '') {
        window.entryUrl = process.env.VUE_APP_BASE_API + 'wechat/';
      }
      var u = navigator.userAgent;
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // g
      return isAndroid ? location.href.split('#')[0] : process.env.VUE_APP_BASE_API + 'wechat/';
    },
    getConfig() {
      getWxConfig({ url: this.getUrl() }).then(res => {
        console.log(JSON.stringify(res.data.data));
        wx.config({
          // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          debug: false,
          // 必填，公众号的唯一标识
          appId: res.data.data.appId,
          // 必填，生成签名的时间戳
          timestamp: res.data.data.timestamp,
          // 必填，生成签名的随机串
          nonceStr: res.data.data.nonceStr,
          // 必填，签名，见附录1
          signature: res.data.data.signature,
          // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          jsApiList: [
            'checkJsApi',
            'openLocation',
          ]
        });
        wx.error(function(res) {
          console.log(JSON.stringify(res));
        });
      });

      wx.error(function(res) {
        alert('出错了：' + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
      });
      wx.ready(function() {
        wx.checkJsApi({
          jsApiList: ['openLocation'],
          success: function(res) {
            //alert('成功了：' + res.errMsg);
          }
        });
      });
    },
  },

  components: {
    BaiduMap,
    BmView,
    BmMarker,
    BmDriving,
    [Row.name]: Row,
    [Col.name]: Col
  }
};
</script>

<style lang="scss" scoped>
.container {
  background-color: white;
}
.bmView{
  height: calc(100vh - 162px);
}
</style>